<!--组件-二级菜单-->
<template>
  <div class="bg">
    <div v-for="(item, index) in menus" v-bind:key="index" @click="menuClick(item)">
      <div class="but">

        <div v-if="selTypes.includes(item.type)" class="mr10 sel-check">
          <text class="text4 font18">✓</text>
        </div>
        <div v-else class="mr10 unsel-check"></div>

        <text :class="['font28', 'text', selTypes.includes(item.type) ? 'text2' : 'text3']">{{item.name}}</text>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .bg {
    flex-direction: row;
    flex: 1;
  }

  .but {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding-right: 40px;
  }

  .sel-check {
    background-color: #1890ff;
    border-color: #1890ff;
    border-width: 2px;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
  }
  .unsel-check {
    background-color: transparent;
    border-color: #777f9b;
    border-width: 2px;
    border-radius: 2px;
    width: 28px;
    height: 28px;
  }
  .text {
    text-align: center;
    lines: 1;
    text-overflow: ellipsis;
  }
</style>

<script>
  import jmodal from "@/_js/modal";
  import jhttps from "@/_js/https";
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;
  export default {
    props: {
      selTypes: {
        type: Array,
        default: [],
      },

      menus: {
        type: Array,
        default: [],
      },
    },

    data() {
      return {
        T: T,
        data: null,
      };
    },

    mounted() {
      this.httpRequst();
    },

    methods: {
      httpRequst() {
        var param = {};
        jhttps.post(
          "indicator/queryNotificationSettings",
          param,
          true,
          (data) => {
            if (data.status == 200) {
              this.data = data.data;
            }
          }
        );
      },
      /********************************** 点击触发*/
      menuClick(item) {
        if (item.type == "tg") {
          if (this.data && !this.data.tgNotification) {
            jmodal.showLoad();
            var param = { tgNotification: !this.selTypes.includes(item.type) };
            jhttps.postX(
              "indicator/openTelegramNotification",
              param,
              true,
              (data) => {
                if (data.status == 200) {
                  jmodal.hideLoad();
                  this.data.tgNotification = true;
                  this.$emit("checkClick", item);
                  jmodal.toast(T("操作成功"));
                } else {
                  jmodal.toast(data.msg);
                }
              }
            );
            return;
          }
        } else if (item.type == "phone") {
          if (this.data && !this.data.phNotification) {
            jmodal.showLoad();
            var param = {
              phNotification: !this.selTypes.includes(item.type),
              phone: "",
            };
            jhttps.postX(
              "indicator/openPhoneNotification",
              param,
              true,
              (data) => {
                jmodal.hideLoad();
                if (data.status == 200) {
                  this.data.phNotification = true;
                  this.$emit("checkClick", item);
                } else {
                  jmodal.toast(data.msg);
                }
              }
            );
            return;
          }
        }
        this.$emit("checkClick", item);
      },
    },
  };
</script>
